<script>
export default {
  name: 'topic view',
  inject: {
    topics: {
      type: Array
    }
  },
  computed: {
    title() {
        let t = this.topics.find( t => t.id == this.$route.params.id );
        return t.title;
    },
    content() {
        let t = this.topics.find( t => t.id == this.$route.params.id );
        return t.content;
    }
  }
};
</script>

<template>
  <div class="topic-detail">
    <h3>{{title}}</h3>
    <p>{{content}}</p>
    <!--路由出口(也可以称作默认视图)-->
    <router-view></router-view>
  </div>
</template>

<style scoped>
.topic-detail {
    min-height: 400px;
    margin: 10px 10px 10px 0;
    background: #f80;
}
</style>